<template>
	<view class="container">
		<view class="content" v-for="(item,index) in groupBuyList" :key="item.id">
			<view @click="onBuyDaties(item)">
				<image :src="item.img" mode=""></image>
				<view class="content_item">
					<!-- 标题 -->
					<text>{{item.title}}</text>
					<!-- 箭头按钮 -->				
					<image src="/static/箭头.jpg" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupBuyList: []
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			const token = uni.getStorageSync('Token')
			wx.request({
				url: 'http://localhost/dev-api/system/buying/list',
				method: 'GET',
				header: {
					'Authorization': 'Bearer ' + token, // 添加Bearer Token到请求头
				},
				success: (resp) => {
					console.log(resp)
					this.groupBuyList = resp.data.rows
				}
			})
		},
		methods: {
			onBuyDaties(item) {
				uni.navigateTo({
					url: '/pages/index/groupBuy/buyDetail?id=' + item.id,	
				})	
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.container {
		width: 95%;
		height: 228px;	
		border-radius: 10px;
	}
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin: 10px 0;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}
	.content image {
		height: 195px;
		width: 100%;
		margin-bottom: 8px;
		border-radius: 10px 10px 0 0 ;
	}
	.content text {
		line-height: 100%;
		font-size: 14px;
		color: #101010;
		margin-left: 5px;
	}
	.content_item {
		padding-bottom: 10px;
		/* 相对定位 */
		position: relative;
	}
	.content_item image {
		/* 绝对定位 */
		position: absolute;
		line-height: 100%;
		width: 16px;
		height: 16px;
		left: 325px;
		padding: 5px 0;
	}
</style>
